// import React from 'react';
import React, { Component } from 'react'
import "./index.less";
import { Select, DatePicker, Space, Tag, Tabs, Table, Image } from 'antd';
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
import { PageContainer } from '@ant-design/pro-layout';
function handleChange(value) {
    console.log(`selected ${value}`);
}
function onChange(value, dateString) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
}
function onOk(value) {
    console.log('onOk: ', value);
}
function callback(key) {
    if (key == "1") {
        console.log("全部")
    }
    else if (key == "2") {
        console.log("待付款")
    } else if (key == "3") {
        console.log("代发货")
    } else if (key == "4") {
        console.log("已发货")
    } else if (key == "5") {
        console.log("已完成")
    } else if (key == "6") {
        console.log("退款")
    }
    else {
        console.log("关闭")
    }
}
const columns = [
    {

        id: 'ID',
        dataIndex: 'id',
        key: 'id',
    },
    {

        title: '商家信息',
        dataIndex: 'shangjia',
        key: 'shangjia',
        dataIndex: 'img',
        key: 'img',
        render: obj => <div className="tupian">
            <Image width={50} height={50}
                src={obj.url}
            />
            <div>
                <p>
                    {obj.text}
                </p>
                <p> 单价：{obj.jiage} *小计 <span className="xj">{obj.xiaoji}</span> </p>
                <p>规格{obj.guige}</p>
            </div>

            <div>

            </div>
        </div>,

    },
    {

        title: '卖家信息',
        dataIndex: 'maijia',
        key: 'maijia',
    },
    {

        title: '送货信息',
        dataIndex: 'songhuo',
        key: 'songhuo',
    },
    {

        title: '金额',
        dataIndex: 'jine',
        key: 'jine',
    },
    {
        title: '状态',
        dataIndex: 'zhuangtai',
        key: 'zhuangtai',
    },

    {
        title: '操作',
        key: 'tags',
        dataIndex: 'tags',
        render: tags => (
            <>
                {tags.map(tag => {
                    let color = tag.length > 5 ? 'geekblue' : 'green';
                    if (tag === 'loser') {
                        color = 'volcano';
                    }
                    return (
                        <Tag color={color} key={tag}>
                            {tag.toUpperCase()}
                        </Tag>
                    );
                })}
            </>
        ),
    },
];

const data = [
    {
        id: '1',
        songhuo: '自提',
        shangjia: '王子豪',
        maijia: 'John Brown',
        jine: 32,
        img: {
            url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.xiumi.us%2Fxmi%2Fua%2F25IAE%2Fi%2Fe54e81a26c7ce21e16281a12a84ce2dd-sz_34485.gif&refer=http%3A%2F%2Fimg.xiumi.us&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634564112&t=8f86f78efd4c3740dd941bea6e0730e5',
            text: '瓦昂自豪',
            jiage: '50',
            xiaoji: '1.00',
            guige: '11',
        },
        zhuangtai: '撒旦卡死十九点上课rk',
        tags: ['nice', 'developer'],
    },
    {
        id: '2',
        songhuo: '自提',
        shangjia: '王子豪',
        maijia: 'Jim Green',
        jine: 42,
        img: {
            url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0123c55a4c34e8a801219741b1302e.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634566305&t=2d60552e808877ee6826798adac0b204',
            text: '瓦昂自豪',
            jiage: '50',
            xiaoji: '1.00',
            guige: '11',
        },        zhuangtai: '撒旦卡死十九点上课',
        tags: ['loser'],
    },
    {
        id: '3',
        songhuo: '自提',
        shangjia: '王子豪',
        maijia: 'Joe Black',
        jine: 32,
        img: {
            url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201402%2F22%2F20140222171505_rsCXj.thumb.700_0.gif&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634566339&t=42354b98108b269a11dafbafbf2b48a8',
            text: '大师的撒可见度检查下',
            jiage: '222',
            xiaoji: '7.00',
            guige: '334',
        },        zhuangtai: '犯得上发射点点上课',
        tags: ['cool', 'teacher'],
    },
];

export default class index extends Component {

    render() {
        return (
            <PageContainer>
                <div className="warp">
                    <div className="top">
                        <div className="topone">
                            <div>
                                <Select defaultValue="订单号" style={{ width: 220 }} onChange={handleChange}>
                                    <Option value="1">订单号</Option>
                                    <Option value="2">卖家电话</Option>
                                    <Option value="3">卖家姓名</Option>
                                </Select>
                                <input type="text" placeholder="请输入" />

                            </div>
                            <Space direction="vertical" size={12}>
                                <RangePicker
                                    showTime={{ format: 'HH:mm' }}
                                    format="YYYY-MM-DD HH:mm"
                                    onChange={onChange}
                                    onOk={onOk}
                                />
                            </Space>
                            <Select defaultValue="退款状态" style={{ width: 220 }} onChange={handleChange}>
                                <Option value="4">退款状态</Option>
                                <Option value="5">退款中</Option>
                                <Option value="6">已退款</Option>
                            </Select>
                        </div>
                        <div className="toptwo">
                            <div>订单状态：</div>
                            <Select defaultValue="未选定" style={{ width: 220 }}> onChange={handleChange}
                                <Option value="7">未选定</Option>
                                <Option value="8">代发货</Option>
                                <Option value="9">待付款</Option>
                            </Select>
                            <div><span>用户ID</span> <input type="text" placeholder="请输入" /></div>
                            <div><span>商品名称</span> <input type="text" placeholder="请输入" /></div>
                            <div> <input type="text" placeholder="请输入" /><button>自提</button></div>
                        </div>
                    </div>
                    <div className="main">
                        <div className="maintop">
                            <Tabs onChange={callback} type="card">
                                <TabPane tab="全部" key="1">
                                </TabPane>
                                <TabPane tab="待付款" key="2">
                                </TabPane>
                                <TabPane tab="代发货" key="3">
                                </TabPane>
                                <TabPane tab="已发货" key="4">
                                </TabPane>
                                <TabPane tab="已完成" key="5">
                                </TabPane>
                                <TabPane tab="退款中" key="6">
                                </TabPane>
                            </Tabs>
                        </div>
                        <div className="list">
                            <Table columns={columns} dataSource={data} />
                        </div>
                    </div>

                </div>
            </PageContainer>
        )
    }
}
